// 工具类样式
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

// 外边距
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.ml-8 { margin-left: 8px; }
.ml-16 { margin-left: 16px; }
.ml-24 { margin-left: 24px; }

.mr-8 { margin-right: 8px; }
.mr-16 { margin-right: 16px; }
.mr-24 { margin-right: 24px; }

// 内边距
.p-8 { padding: 8px; }
.p-16 { padding: 16px; }
.p-24 { padding: 24px; }

.pt-8 { padding-top: 8px; }
.pt-16 { padding-top: 16px; }
.pt-24 { padding-top: 24px; }

.pb-8 { padding-bottom: 8px; }
.pb-16 { padding-bottom: 16px; }
.pb-24 { padding-bottom: 24px; }

.pl-8 { padding-left: 8px; }
.pl-16 { padding-left: 16px; }
.pl-24 { padding-left: 24px; }

.pr-8 { padding-right: 8px; }
.pr-16 { padding-right: 16px; }
.pr-24 { padding-right: 24px; }

// Flex布局
.flex { display: flex; }
.flex-center { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
.flex-between { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}
.flex-column { 
  display: flex; 
  flex-direction: column; 
}
.flex-wrap { 
  display: flex; 
  flex-wrap: wrap; 
}

// 尺寸
.w-full { width: 100%; }
.h-full { height: 100%; }

// 显示/隐藏
.hidden { display: none; }
.invisible { visibility: hidden; }

// 浮动
.float-left { float: left; }
.float-right { float: right; }
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

// 光标
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
